<template>
    <div class="main">
        <div>
            <div>
            上传漫画
            </div>
            <div>
                <!-- <el-button type="primary" round>主要按钮</el-button> -->
                <el-button  @click="centerDialogVisible3 = true" icon="el-icon-upload" circle ></el-button>
            </div>
        </div>
        <div>
            <div class="card-parent" v-for="item in pyInfoList" :key="item"> 
                <div class="my-detail-recommend-card"> 
                    <div>
                        <el-image :src="uploadPicture(item.pictureUrl)">
                            <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                        </el-image>
                    </div>
                    <div>
                        <div>
                            <span>{{item.name}}</span>
                            <!-- <div>
                                <span>类型: </span><span> 热血{{item}}</span>
                            </div> -->
                        </div>
                        <!-- <div class="my_button">
                            <el-button plain size="small">开始阅读</el-button> 
                            <el-button plain size="small">取消订阅</el-button>
                        </div> -->
                    </div>
                </div>
                <div>
                    <div>爬取网址：<el-tag>{{item.url}}</el-tag></div>
                    <br>
                    <div>审核状态: <el-tag>{{ item.state == 0 ? '待审核' :　
                                            (item.state == 1 ? '审核中' : 
                                            (item.state == 2 ? '审核未通过' : 
                                            (item.state == 3 ? '审核通过' : '审核未通过')))  }}</el-tag></div>
                </div>
                <div class="my_button">
                    <el-button plain size="small" @click="deleteRotationPicture(item.id)">删除</el-button> 
                    <el-button plain size="small" @click="centerDialogVisible2 = true; selectPyInfo(item)" >修改</el-button>
                    <el-button plain size="small" @click="centerDialogVisible1 = true ; selectPyInfo(item)" >详情</el-button>
                </div>
            </div>
            <div>
                <!-- 弹出框1-详细信息 -->
                <el-dialog title="详细信息" :visible.sync="centerDialogVisible1" width="40%" center>
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="图片">
                            <el-image :src="uploadPicture(pyInfo.pictureUrl)">
                                <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                            </el-image>
                        </el-descriptions-item>
                        <el-descriptions-item label="网站名称">{{pyInfo.name}}</el-descriptions-item>
                        <el-descriptions-item label="网站网址">{{pyInfo.url}}</el-descriptions-item>
                        <el-descriptions-item label="源(防盗链)">{{pyInfo.referer}}</el-descriptions-item>
                        <el-descriptions-item label="章节条数(无则填-1)">{{pyInfo.pageSize}}</el-descriptions-item>
                        <el-descriptions-item label="描述">{{pyInfo.describe}}</el-descriptions-item>
                        <el-descriptions-item label="推荐源"><el-tag>{{pyInfo.sort == 0 ? '是' : '否'}}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="审核状态"><el-tag>
                                            {{ pyInfo.state == 0 ? '待审核' :　
                                            (pyInfo.state == 1 ? '审核中' : 
                                            (pyInfo.state == 2 ? '审核未通过' : 
                                            (pyInfo.state == 3 ? '审核通过' : '审核未通过')))  }}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="审核消息">{{pyInfo.message}}</el-descriptions-item>

                    </el-descriptions>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible1 = false ; clearPyInfo();">确 认</el-button>
                    </span>
                </el-dialog>
                <!-- 弹出框2-修改-->
                <el-dialog title="修改信息" :visible.sync="centerDialogVisible2" width="40%" center>
                    <div id = "my_dialog">
                        <div class="my_upload">
                            <div>
                                <!-- <el-avatar :size="80" :src="uploadPicture(this.userInfo.avatar)"></el-avatar> -->
                                python文件:
                            </div>
                            <div>
                                <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                    :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> -->
                                <el-upload action="#"
                                :multiple="false" 
                                :show-file-list="true" 
                                :http-request="uploadHttpRequestPyUrl" 
                                :file-list="fileList2" 
                                :on-change="handleUploadChange2"
                                :before-upload="beforeUploadPyUrl">
                                    <el-button size="small" >重新上传</el-button> 
                                    <div slot="tip" class="el-upload__tip">只能上传.py文件，且不超过2M</div>
                                </el-upload>
                            </div>
                        </div>
                        <div class="my_upload">
                            <div>
                                <el-avatar :size="80" :src="uploadPicture(this.pyInfo.pictureUrl) " shape="square"></el-avatar>
                            </div>
                            <div>
                                <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                    :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> -->
                                <el-upload action="#"
                                :multiple="false" 
                                :show-file-list="true" 
                                :http-request="uploadHttpRequestPictureUrl" 
                                :file-list="fileList1" 
                                :on-change="handleUploadChange1"
                                :before-upload="beforeUploadPictureUrl">
                                    <el-button size="small" >重新上传</el-button> 
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </div>
                        </div>
                        <el-form ref="form" :model="pyInfo" label-width="80px">
                            <el-form-item label="网站名称">
                                <el-input v-model="pyInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="网站域名">
                                <el-input v-model="pyInfo.url"></el-input>
                            </el-form-item>
                            <el-form-item label="源(防盗链)">
                                <el-input v-model="pyInfo.referer"></el-input>
                            </el-form-item>
                            <el-form-item label="章节条数">
                                <el-input v-model="pyInfo.pageSize"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="是否为首页推荐源">
                                <el-input v-model="pyInfo.email" disabled="true"></el-input>
                            </el-form-item> -->
                            <el-form-item label="描述">
                                <el-input v-model="pyInfo.describe"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible2 = false; clearPyInfo()">取 消</el-button>
                            <el-button type="primary" @click="centerDialogVisible2 = false; updatePyInfo();">修 改</el-button>
                        </span>
                </el-dialog>
            </div>
        </div>
        <div>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page="pagehide"
            :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, prev, pager, next, sizes" :total="this.page.total"> </el-pagination>
        </div>
        <div>
            <!-- 弹出框-增加-->
            <el-dialog title="上传漫画" :visible.sync="centerDialogVisible3" width="40%" center>
                    <div id = "my_dialog">
                        <div class="my_upload">
                            <div>
                                <!-- <el-avatar :size="80" :src="uploadPicture(this.userInfo.avatar)"></el-avatar> -->
                                python文件:
                            </div>
                            <div>
                                <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                    :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> -->
                                <el-upload action="#"
                                :multiple="false" 
                                :show-file-list="true" 
                                :http-request="uploadHttpRequestPyUrl" 
                                :file-list="fileList2" 
                                :on-change="handleUploadChange2"
                                :before-upload="beforeUploadPyUrl">
                                    <el-button size="small" >点击上传</el-button> 
                                    <div slot="tip" class="el-upload__tip">只能上传.py文件，且不超过2M</div>
                                </el-upload>
                            </div>
                        </div>
                        <div class="my_upload">
                            <div>
                                <el-avatar :size="80" :src="uploadPicture(this.pyInfo.pictureUrl) " shape="square"></el-avatar>
                            </div>
                            <div>
                                <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
                                    :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList"> -->
                                <el-upload action="#"
                                :multiple="false" 
                                :show-file-list="true" 
                                :http-request="uploadHttpRequestPictureUrl" 
                                :file-list="fileList1" 
                                :on-change="handleUploadChange1"
                                :before-upload="beforeUploadPictureUrl">
                                    <el-button size="small" >点击上传</el-button> 
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </div>
                        </div>
                        <el-form ref="form" :model="pyInfo" label-width="80px">
                            <el-form-item label="网站名称">
                                <el-input v-model="pyInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="网站域名">
                                <el-input v-model="pyInfo.url"></el-input>
                            </el-form-item>
                            <el-form-item label="源(防盗链)">
                                <el-input v-model="pyInfo.referer"></el-input>
                            </el-form-item>
                            <el-form-item label="章节条数">
                                <el-input v-model="pyInfo.pageSize"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="是否为首页推荐源">
                                <el-input v-model="pyInfo.email" disabled="true"></el-input>
                            </el-form-item> -->
                            <el-form-item label="描述">
                                <el-input v-model="pyInfo.describe"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible3 = false; clearPyInfo()">取 消</el-button>
                            <el-button type="primary" @click="centerDialogVisible3 = false ; addPyInfo();">上 传</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>


<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: 'Upload',
  data () {
    return {
        logo: LogoSrc,
        centerDialogVisible1: false, //详细信息
        centerDialogVisible2: false, //修改
        centerDialogVisible3: false, //新增
        base:{
            userId: this.$store.state.common.userId,
            avatar: this.$store.state.common.avatar, 
        },
        //分页参数
        page: {
            index: 1,
            size: 10,
            total: 0,
        },
        //上传文件列表
        fileList1: [],
        fileList2: [],
        //python文件信息列表
        pyInfoList: [],
        //python文件信息
        pyInfo: {
            describe: "",
            id: 0,
            name: "",
            pictureUrl: "",
            referer: "",
            sort: null,
            url: "",
            pyUrl: "",
            userId: null,
            userName: null,
            pageSize: null,
            message: '', //供用户看,用户不能修改
            state: 0, //供用户看,用户不能修改
        },
    }
  },
  methods: {
    /** 加载系统图片 */
    uploadPicture(url){
        return url == '' || url == undefined | url == null ? '' : Api.FILEROOT + url
    },
    //分页值修改
    handleSizeChange(val) {
        this.page.size=val;
        this.getTableInfo();
    },
    handleCurrentChange(val) {
        //当前为第几页时调用getTabelInfo()显示第几页数据
        this.page.index=val;
        this.currentPage=val;
        this.getTableInfo();
    },
    //获取历史数据
    getTableInfo(){
        //初始化界面,获取登录用户信息
        Api.getPyControllerQueryCollectComicPageResource(this.page.index, this.page.size, this.base.userId).then(response => {
            if(response.data.code = 200){
                this.pyInfoList = response.data.data.data
                this.page.total = Number(response.data.data.total)              
            }
        })
    },
    //新增python文件
    addPyInfo(){
        let {id,sort,userId,userName,message,state, ...data} = this.pyInfo
        Api.getPyControllerAddAndEditSpiderInfoByUserResource(data).then(response => {
            if(response.data.code == 200){
                this.$notify({
                        title: '提示',
                        message: "新增成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
                    this.$router.go(0)
            }
        },error => {
            this.$notify({
                  title: '提示',
                  message: '新增失败',
                  position: 'bottom-left',
                  type: 'error'
              });
              this.$router.go(0)
        })
    },
    //修改python文件
    updatePyInfo(){
        let {sort,userId,userName,message,state, ...data} = this.pyInfo
        Api.getPyControllerAddAndEditSpiderInfoByUserResource(data).then(response => {
            if(response.data.code == 200){
                this.$notify({
                        title: '提示',
                        message: "修改成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
                    this.$router.go(0)
            }
        },error => {
            this.$notify({
                  title: '提示',
                  message: '修改失败',
                  position: 'bottom-left',
                  type: 'error'
              });
              this.$router.go(0)
        })
    },
    //删除python文件
    deleteRotationPicture(id) {
        this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            Api.getOperationControllerDeleteCoSpiderInfoResource(id).then(response => {
               if(response.data.code == 200){
                    this.$router.go(0)
                    this.$notify({
                        title: '提示',
                        message: "删除成功",
                        position: 'bottom-left',
                        type: 'success'
                    });
               }
            },error => {
                //获取搜索内容
                this.$notify({
                    title: '提示',
                    message: '删除失败',
                    position: 'bottom-left',
                    type: 'error'
                });
            })
        }).catch(() => {         
        });
    },
    //上传方法 图片
    beforeUploadPictureUrl(file) {
        const fileType = file.name.substring(file.name.lastIndexOf('.'))
        if (fileType.toLowerCase() != '.jpg' && fileType.toLowerCase() != '.png') {
            this.$message.error('文件必须为.jpg或.png类型')
            this.fileList1 = []
            return false
        }
    },
    // 覆盖element的默认上传文件 图片
    uploadHttpRequestPictureUrl(data) {
        Api.getMinioControllerUploadResource(data).then(response => {
            if(response.data.code == 200){
                this.pyInfo.pictureUrl = response.data.data
            }
        })
    },
    // 限制文件上传的个数只有一个，获取上传列表的最后一个 图片
    handleUploadChange1(file, fileList) {
        if (fileList.length > 0) {
            this.fileList1 = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
        }
    },
    //上传方法 py文件
    beforeUploadPyUrl(file) {
        const fileType = file.name.substring(file.name.lastIndexOf('.'))
        if (fileType.toLowerCase() != '.py') {
            this.$message.error('文件必须为.py类型')
            this.fileList = []
            return false
        }
    },
    //上传py文件
    uploadHttpRequestPyUrl(data) {
        Api.getMinioControllerUploadResource(data).then(response => {
            if(response.data.code == 200){
                this.pyInfo.pyUrl = response.data.data
            }
        })
    },
    // 限制文件上传的个数只有一个，获取上传列表的最后一个  py文件
    handleUploadChange2(file, fileList) {
        if (fileList.length > 0) {
            this.fileList2 = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的文件
        }
    },
    //选定某部漫画
    selectPyInfo(pyInfo){
        this.pyInfo.describe = pyInfo.describe
        this.pyInfo.id = pyInfo.id
        this.pyInfo.name = pyInfo.name
        this.pyInfo.pictureUrl = pyInfo.pictureUrl
        this.pyInfo.referer = pyInfo.referer
        this.pyInfo.sort = pyInfo.sort
        this.pyInfo.url = pyInfo.url
        this.pyInfo.userId = pyInfo.userId
        this.pyInfo.userName = pyInfo.userName
        this.pyInfo.message = pyInfo.message
        this.pyInfo.pageSize = pyInfo.pageSize
        this.pyInfo.state = pyInfo.state
        this.pyInfo.pyUrl = pyInfo.pyUrl
    },
    //清空数据
    clearPyInfo(){
        this.pyInfo = {
            describe: "",
            id: 0,
            name: "",
            pictureUrl: "",
            referer: "",
            sort: null,
            url: "",
            pyUrl: "",
            userId: null,
            userName: null,
            pageSize: null,
            message: '', //供用户看,用户不能修改
            state: 0, //供用户看,用户不能修改
        }
    }
  },
  mounted() {
      //初始化数据
      this.getTableInfo();
  }
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
}
.el-avatar{
    box-shadow: 0px 0px 5px 1px rgb(223, 223, 223);
}
.main > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    margin: 0px 0px 30px 0px;
    font-weight: 1000;
    display: flex;
    /* flex-direction: row; */
    justify-content: space-between;
    align-content: space-between;
    width: 100%;
}
.main > div:nth-child(2){
    width: 100%;
}
/** 分页样式 */
.main > div:nth-child(3){    
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/** 卡条样式 */
.card-parent{
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* align-content: center; */
    justify-content: space-between;
    margin-top: 20px;
}
.card-parent > div:nth-child(2){
    height: min-content;
    margin-top:auto;
    margin-bottom:auto;
    margin-right: 10%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: 550;
}
/**卡片样式 */
.my-detail-recommend-card{
    /* margin-top: 16px; */
    width: 261px;
    height: 120px;
    display: flex;
    flex-direction: row;
    /* padding: 4px 0px 4px 0px; */
}
.my-detail-recommend-card > div:first-child .el-image {
    width: 90px;
    height: 120px;
}
.my-detail-recommend-card > div:nth-child(2){
    width: 181px;
    height: 106px;
    margin-left: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}  
/** 按钮样式 */
.my_button{
    width: 25%;
    height: max-content;
    display: flex;
    flex-direction: row;
    margin-top:auto;
    margin-bottom:auto;
}
.my_button > .el-button{
    width: 45%;
}

/** 其他*/
.card-parent:hover{
    background-color: rgb(241, 241, 241);
    /* box-shadow: -2px 2px 2px 2px rgb(235, 235, 235); */
}
.card-parent:active{
    background-color: rgb(241, 241, 241);
    /* box-shadow: -2px 2px 2px 2px rgb(196, 196, 196); */
}

#my_dialog {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
#my_dialog > .el-form {
    width: 100%;
}
#my_dialog > .my_upload{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
#my_dialog > .my_upload > div:first-child{
    margin-right: 50px;
} 
</style>